<template>
  <div class="box">
    <div class="top">
      <img src="/recommend/1.jpg" alt="" />
    </div>
    <div class="bottom">
      <div class="center">
        <div class="center-left">
            <div class="center-left-left">
                <b> Tap  独家</b>
            </div>
             <div class="center-left-center">
                <b>👍  编辑推荐</b>
            </div>
             <div class="center-left-right">
                <img src="/recommend/3.png" alt="">
                <b>Roguelike #15</b>
            </div>
                
        </div>
        <div class="center-right">
            <img src="/recommend/4.png" alt="">
            <span>8.0</span>
        </div>
      </div>
      <div class="bottom-bottom">
          <h6>军团</h6>
          <p> Roguelite策略冒险，征战11个奇幻国度 </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  margin-top: -0.05rem;
}
.top {
  /* background-color: pink; */
  text-align: center;
}
.top img {
  width: 3.432rem;
  height: 1.9305rem;
  text-align: center;
  border-radius: 0.07rem 0.07rem 0 0;
}
.bottom {
    width: 3.432rem;
    height: 0.936rem;
    /* background-color: red; */
     margin: auto;
     margin-top:-0.26rem ;
     background-color: #fff;
     margin-bottom: 0.3rem;
      border-radius: 0 0 0.07rem 0.07rem;
}
.center{
    width: 3.342rem;
    height: 0.24rem;
    margin-top: 0.05rem;
    margin: auto;
    /* background-color: orange; */
    display: flex;
    justify-content:space-between;
    padding-top: 0.1rem;
}
.center-left {
  width: 2.652rem;
  height: 0.24rem;
  /* background-color: pink; */
  display: flex;
  justify-content:space-between;
  position: relative;
}
.center-right{
    width: 0.4943rem;
    /* background-color: purple; */
    position: relative;;
}
.center-left-left{
    width: 0.52rem;
    height: 0.18rem;
    position:absolute;
    top:0rem;
    left: 0rem;
    background-color: #15c5ce;
    border-radius:0.04rem ;

}
.center-left-left b{
    color: #fff;
    font-size: 0.1rem;
    position:absolute;
    top:0.02rem;
    left: 0rem;
}
.center-left-center b{
    color: #fff;  
    border: solid 0.01rem #ff8156 ;
    font-size: 0.1rem;
     position:absolute;
    top:0rem;
    left: 0.6rem;
    color: #ff8156;
    padding: 0.02rem;
    border-radius:0.04rem ;
}
.center-left-right{
    width: 0.9278rem;
    height: 0.18rem;
    position:absolute;
    top: 0rem;
    left: 1.3rem;
    color: #15C5CE;
  border: solid 1px #15C5CE;
  border-radius:0.04rem ;
  /* position: relative; */
}
.center-left-right img{
    width: 0.2rem;
    height: 0.14rem;
    position:absolute;
     top: 0.01rem;
}
.center-left-right b{
    font-size: 0.1rem;
    position:absolute;
    top: 0.04rem;
    left: 0.2rem;
}
.center-right img{
    width: 0.16rem;
    height: 0.16rem;
    position:absolute;
    top: 0.04rem;
}
.center-right span{
    font-size: 0.2rem;
    color: #15C5CE;
    font-weight: 700;
    position:absolute;
    left: 0.2rem;
}
.bottom-bottom h6{
font-size: 0.16rem;
margin-top:0.05rem ;
margin-left:0.05rem ;
}
.bottom-bottom p{
font-size: 0.12rem;
color: #868c92;
margin-top:0.1rem ;
margin-left:0.05rem ;

}
</style>